<template>
  <div>
    <c-table-box
      ref="cTableBox"
      hide-func
      checkbox
      :other-filters="otherFilters"
      :table-config="tableConfig"
      @selection-change="selectionChange"
    >
      <template #btn>
        <c-permission v-if="type === 'curtainAudit'" code="curtainAudit">
          <AuditDraw
            :sel-data="selections"
            opt-code="curtainAudit"
            @on-success="refreshTableData"
          />
        </c-permission>
      </template>
    </c-table-box>
  </div>
</template>
<script>
import { otherFiltersItem } from '@/utils'
import AuditDraw from './AuditDraw'
export default {
  name: 'List',
  components: {
    AuditDraw
  },
  props: {
    type: {
      type: String,
      default: ''
    },
    activeType: {
      type: String,
      default: ''
    },
    serachFilters: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableConfig: {
        interfacePath: '/slm-admin/api/v1/shopColorTask/page',
        hideFuncBar: true,
        sort: /* 'createTime' */ '',
        setting: [
          {
            prop: 'colorTaskCode',
            label: '窗帘任务号',
            width: 180,
            className: 'btn-green',
            isButton: true,
            clickFun: this.toDetail
          },
          {
            prop: 'colorSchedule',
            label: '窗帘任务进度',
            width: 130,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'SWATCHES_PROGRESS'
            }
          },
          {
            prop: 'constState',
            label: '门店建设状态',
            minWidth: 130,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'CONST_STATE'
            }
          },
          {
            prop: 'decorationTaskCode',
            label: '装修任务号',
            minWidth: 120
          },
          {
            prop: 'decorationSchedule',
            label: '装修进度',
            minWidth: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'DECORATION_SCHEDULE'
            }
          },
          {
            prop: 'decorationStep',
            label: '装修步骤',
            minWidth: 120,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'SHOP_DECORATION_STEPS'
            }
          },
          {
            prop: 'decorationStatus',
            label: '装修状态',
            minWidth: 100,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'SHOP_DECORATION_STATE'
            }
          },
          {
            prop: 'actualApproachTime',
            label: '实际进场时间',
            minWidth: 130,
            formatData: this.$parseTimeYMD('actualApproachTime')
          },
          {
            prop: 'clientName',
            label: '客户名称',
            minWidth: 120
          },
          {
            prop: 'shopName',
            label: '门店名称',
            minWidth: 120
          },
          {
            prop: 'bizCode',
            label: '业务账号编码',
            minWidth: 130
          },
          {
            prop: 'bizName',
            label: '业务账号名称',
            minWidth: 130
          },
          {
            prop: 'isCurtain',
            label: '是否需要窗帘物料',
            minWidth: 150,
            formatData: ({ isCurtain }) => {
              return isCurtain === 1 ? '是' : isCurtain === 0 ? '否' : isCurtain
            }
          },
          {
            prop: 'curtainSize',
            label: '窗帘展示区内框尺寸',
            minWidth: 150,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'CURTAIN_SIZE'
            }
          },
          {
            prop: 'curtainSamples',
            label: '窗帘样本6QR20078001',
            minWidth: 150,
            formatData: ({ curtainSamples }) => {
              return curtainSamples === 1 ? '是' : curtainSamples === 0 ? '否' : curtainSamples
            }
          },
          {
            prop: 'railHardware',
            label: '轨道五金包6QR20077001',
            minWidth: 150,
            formatData: ({ railHardware }) => {
              return railHardware === 1 ? '是' : railHardware === 0 ? '否' : railHardware
            }
          }
        ]
        // apiHeader: {
        //   'Permission-perCode': 'colorneedtask',
        //   'Permission-App': 'slm'
        // }
      },
      typeFilters: [],
      selections: [],
      formData: {}
    }
  },
  computed: {
    otherFilters() {
      return [...this.serachFilters, ...this.typeFilters, otherFiltersItem('taskType', 'B', '=')]
      // return [...this.serachFilters, ...this.typeFilters]
    }
  },
  watch: {
    type: {
      handler(v) {
        this.setTableSetting(v)
      },
      immediate: true
    },
    serachFilters: {
      handler(v) {
        if (this.activeType !== this.type) return
        this.$nextTick(() => {
          this.$refs.cTableBox.initTableData()
        })
      }
    }
  },
  created() {},
  activated() {
    if (this.ready && this.refreshTableData) {
      this.refreshTableData()
    }
  },
  deactivated() {
    this.ready = true
  },
  methods: {
    setTableSetting(v) {
      switch (v) {
        case 'all':
          this.typeFilters = [
          ]
          break
        case 'curtainAudit':
          this.typeFilters = [
            otherFiltersItem('decorationStatus', 'A', '='),
            otherFiltersItem('constState', 'A', '='),
            otherFiltersItem('colorSchedule', 'A', '=')
          ]
          break
      }
    },
    selectionChange(v) {
      this.selections = v
      this.formData = this.selections[0]
    },
    refreshTableData(v = 'onPage') {
      this.$nextTick(() => {
        this.$refs.cTableBox.initTableData(v)
      })
    },

    // 详情
    toDetail(row) {
      this.$router.push({
        name: 'ColorNeedDetail',
        query: {
          id: row.id,
          isCurtainPge: 1,
          isCurtain: row.isCurtain,
          curtainSize: row.curtainSize,
          curtainSamples: row.curtainSamples,
          railHardware: row.railHardware
        }
      })
    }
  }
}
</script>
